import React  from "react";
import {
  Row,
  Col,
  Input,
  Select,
  Spin,
  Modal,
  Card,
  Space,
  Breadcrumb,
 
  message,
  Empty,
} from "antd";
import {
  QrcodeOutlined,
  PlusCircleOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
import { connect } from "react-redux";

import "./exp.css";
import { _selExp,_joinExp,_isJoin } from "../../../../utils/exp/index";


const { Search } = Input;
const { confirm } = Modal;
class Index extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    isLoading: false,
    exp_num: "",
    data: null,
    is_success: false,
    is_join:false
  };
  // editHandle = () => {
  //   let tempData = {
  //     tch_num: this.state.tch_num,
  //     tch_name: this.state.tch_name,
  //     tch_pwd: this.state.tch_pwd,
  //     tch_title: this.state.tch_title,
  //     tch_phone: this.state.tch_phone,
  //   };
  //   console.log(tempData);
  //   _updateTch(this.state.tch_id, tempData)
  //     .then((res) => {
  //       if (res.status === 200) {
  //         this.setState({
  //           e_visible: false,
  //         });
  //         message.success("修改成功");
  //         this.getData();
  //       }
  //     })
  //     .catch(() => {
  //       this.setState({ confirmLoading: false });
  //       message.error("服务器错误");
  //     });
  // };
  selectOnSearch = (val) => {
    // console.log("search:", val);
    this.setState({ isLoading: true });
    _selExp(val)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          if (res.data.data) {
            this.setState({
              is_success: true,
              data: res.data.data,
            });
            message.success("查询成功！");
            let temp = {
              stu_id: this.props.state.data.stu_id,
              exp_num: val,
            };
            console.log(temp);
            _isJoin(temp).then((res) => {
              if(res.status === 200){
                if(res.data.code === 0){
                  this.setState({is_join:true})
                }else{
                  this.setState({ is_join: false });

                }
            }})
          } else {
            message.info("没有查询到相关实验");
          }
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  joinExp = () => {
    let self = this
    confirm({
      title: "你确定要加入该实验吗？",
      okText: "确定",
      cancelText: "取消",
      icon: <ExclamationCircleOutlined />,
      content: `实验名称：${this.state.data.exp_name}/专业：${this.state.data.exp_class}`,
      onOk() {
        console.log(self.state.data.exp_id, self.props.state.data.stu_id);
        let temp = {
          stu_id: self.props.state.data.stu_id,
          exp_id: self.state.data.exp_id,
          exp_mark:''
        };
        _joinExp(temp)
          .then((res) => {
            if (res.status === 200 && res.data.code === 0) {
              self.setState({ is_join: true });
              message.success("加入成功").then(() =>{
                self.props.history.push("/admin/s-eing");
              });
            }
          })
          .catch(() => {
            this.setState({ isLoading: false });
            message.error("服务器错误");
          });
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  render() {
    const expData = this.state.data;
    return (
      <div>
        <div className="stu-header">
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>实验列表</Breadcrumb.Item>
          </Breadcrumb>
          <Space size="large">
            <Search
              placeholder="搜索实验编号"
              onSearch={this.selectOnSearch}
              enterButton
            />
          </Space>
        </div>

        <div className="admin-body" style={{ padding: 15, minHeight: 360 }}>
          <Spin tip="Loading..." spinning={this.state.isLoading}>
            {this.state.is_success ? (
              <Row>
                <Col span={8}>
                  <Card
                    title={
                      <div className="card-header">
                        {expData.exp_name}
                        <p>（{expData.exp_class}）</p>
                      </div>
                    }
                    bordered={false}
                    headStyle={{
                      background: `${expData.exp_style}`,
                      fontSize: "16px",
                      color: "#f6f6f6",
                      boxShadow: "5px 7px 23px 0px rgba(58, 52, 82, 0.16)",
                      borderTopLeftRadius: "5px",
                      borderTopRightRadius: "5px",
                    }}
                    bodyStyle={{
                      padding: "10px",
                      boxShadow: "5px 7px 23px 0px rgba(58, 52, 82, 0.16)",
                      borderBottomLeftRadius: "5px",
                      borderBottomRightRadius: "5px",
                    }}
                  >
                    <div className="card-body">
                      <div>
                        <span>年级：</span>
                        {expData.exp_grade}
                      </div>
                      <div>
                        <span>教师：</span>
                        {expData.tch_name}
                      </div>
                      <div>
                        <span>专业：</span>
                        {expData.exp_class}
                      </div>
                      <div>
                        <span>实验时间：</span>
                        {expData.exp_time}
                      </div>
                      <div className="card-footer">
                        <div>
                          <Space size="large">
                            <Space>
                              <QrcodeOutlined
                                style={{ color: "#1890ff", fontSize: 14 }}
                              />
                              {expData.exp_num}
                            </Space>
                          </Space>
                        </div>
                        {this.state.is_join ? (
                          <div className="exp-join">
                            <div style={{color:'#ccc'}}>已加入</div>
                          </div>
                        ) : (
                          <div onClick={this.joinExp} className="exp-join">
                            <Space>
                              <PlusCircleOutlined
                                style={{ color: "#1890ff", fontSize: 14 }}
                              />
                              加入
                            </Space>
                          </div>
                        )}
                      </div>
                    </div>
                  </Card>
                </Col>
              </Row>
            ) : (
              <Empty description="暂无数据" />
            )}
          </Spin>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    state: state.user,
  };
};
const actionCreator = {};
export default connect(mapStateToProps, actionCreator)(Index);
